<template>
	<view class="assistantContent"> 
		<commonNavBar title="我的" :showBack="false"   ></commonNavBar>  
		<view class="centre">
			<view class="top">
				<image src="/static/img/head.png" mode="aspectFill"></image>
				<view class="h1">{{ name }}</view>
				<view class="h2">{{ duties }}</view>
			</view>
			<view class="bottom">
				<view class="li" v-for="(item, index) in meList" :key="item.id" @click="arrow(item.id)">
					<image :src="item.image" class="image" />
					<view class="box"    >
						<view class="content">
							<view class="h1">{{ item.title }}</view>
						</view>
						<view class="open"  >
							<text  v-if="index === 2">{{ version }}</text>
							<uni-badge type="error" v-if="index === 2 && newVersion " text="新版本" :is-dot="false"></uni-badge>
							<view class="arrow"></view>
						</view> 
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import commonNavBar from '@/components/CommonNavBar.vue';
	
	export default {
		components:{
			commonNavBar
		},
		data() {
			return {
				title: '我的',
				name: '-',
				duties: '-',
				baseUrl: uni.$baseUrl,
				meList: [{
					id: 1,
					image: '/static/img/meList1.png',
					title: '账号信息',
				}, {
					id: 2,
					image: '/static/img/meList2.png',
					title: '修改密码',
				}, {
					id: 3,
					image: '/static/img/meList3.png',
					title: '版本信息',
				}],
				version: '',
				newVersion:false,
				showModel:true
			}
		},
		onLoad(options) {
			this.listData()
			const that = this;
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
				that.version = widgetInfo.version
			})
			this.checkUpdate(false);
			// #endif
		},
		methods: {
			arrow(id) {
				if (id === 1) {
					uni.navigateTo({
						url: '/pages/me/accountInformation'
					})
				} else if (id === 2) {
					uni.navigateTo({
						url: '/pages/password/retrievePassword'
					})
				}  else if (id === 3) {
					this.checkUpdate(true)
				}
			},
			async listData() {
				try {
					const res = await uni.$api.getMyUserInfo();
					console.log('res', res)
					if (res.data.code === 0) {
						this.name = res.data.data.userName
						this.duties = res.data.data.deptName
					}
				} catch (error) {
					console.error(error)
				}
			},
			async checkUpdate(showModel) {
				const that = this;
				//检查客户端版本 
				let type = uni.getSystemInfoSync().platform
				if(showModel){
					uni.showLoading({
						title:'获取更新信息',
						mask: true
					})
				}
				
				const res = await uni.$api.updateVersion({
					type : type
				});  
				this.showModel = showModel;
				uni.hideLoading();
				const response = res.data;
				if (response.data != null) {
					const updateData = response.data;
					let versionOne = 0
					let versionTwo = 0
					let versionThree = 0
				
					if (updateData.packageType == null || updateData.packageType == 1) {
						//全量包 
						versionOne = plus.runtime.version.split(".")[0]
						versionTwo = plus.runtime.version.split(".")[1]
						versionThree = plus.runtime.version.split(".")[2] 
						if (updateData.versionOne > versionOne) {
							that.showUpdateModel('0', type, response.data);
							that.newVersion = true;
						} else if (updateData.versionOne >= versionOne && updateData.versionTwo >
							versionTwo) {
							that.showUpdateModel('0', type, response.data);
							that.newVersion = true;
						} else if (updateData.versionOne >= versionOne && updateData.versionTwo >=
							versionTwo && updateData.versionThree > versionThree) {
							that.showUpdateModel('0', type, response.data);
							that.newVersion = true;
						} else {
							if(that.showModel){
								uni.showToast({
									title:'当前已经是最新版'
								})
							}
						}
					} else {
						//wgt包 
						plus.runtime.getProperty(plus.runtime.appid, function(widgetInfo) {
							versionOne = widgetInfo.version.split(".")[0]
							versionTwo = widgetInfo.version.split(".")[1]
							versionThree = widgetInfo.version.split(".")[2]
							if (updateData.versionOne > versionOne) {
								that.showUpdateModel('1', type, response.data);
								that.newVersion = true;
							} else if (updateData.versionOne >= versionOne && updateData
								.versionTwo >
								versionTwo) {
								that.showUpdateModel('1', type, response.data);
								that.newVersion = true;
							} else if (updateData.versionOne >= versionOne && updateData
								.versionTwo >=
								versionTwo && updateData.versionThree > versionThree) {
								that.showUpdateModel('1', type, response.data);
								that.newVersion = true;
							} else {
								if(that.showModel){
									uni.showToast({
										title:'当前已经是最新版'
									})
								}
							}
						})
					}
				} else{
					if(this.showModel){
						uni.showToast({
							title:'当前已经是最新版'
						})
					}
				} 		 
			},
			showUpdateModel(packageType, centerType, data) { 
				const that = this;
				uni.removeStorageSync("appupdate");
				if(!this.showModel){
					//不显示更新弹窗
					return;
				}
				uni.showModal({
					title: "有新版本 v" + data.versionOne + "." + data.versionTwo + "." + data.versionThree,
					content: data.content,
					confirmText: '开始更新',
					success: function(r) {
						if (r.confirm) {
							//如果是热更新包 可直接进行更新
							if (packageType == '1') {
								//wgt 
								that.downWgt(that.baseUrl + data.fileUrl); //下载文件,安装app 
							} else {
								if (centerType == 'android') {
									//apk
									plus.runtime.openURL(that.baseUrl + data.fileUrl);
								} else {
									let appleId = 'com.chenglian.supervies'
									plus.runtime.launchApplication({
										action: 'itms-apps://itunes.apple.com/cn/app/id' +
											appleId + '?mt=8'
									}, function(e) {
										uni.showModal({
											showCancel: false,
											content: '打开App Store失败,可尝试手动打开App Store搜索此应用进行更新'
										})
									});
								}
							}
						}
					}
				})
			},downWgt: function(downloadUrl) {
				var waiting = plus.nativeUI.showWaiting("开始下载更新文件");
				var progress = 0;
				console.log(downloadUrl)
				var task = uni.downloadFile({
					url: downloadUrl,
					success: function(res) {
						if (res.statusCode == 200) {
							//下载完成进行安装
							waiting = plus.nativeUI.showWaiting("开始安装更新文件");
							plus.runtime.install(res.tempFilePath, {
									force: true
								},
								function() {
									waiting.close();
									uni.showModal({
										content:'版本已更新',
										showCancel:false,
										success:function(res){
											if (res.confirm) {
												plus.runtime.restart();
											}  
										}
									}) 
								},
								function(e) {
									waiting.close();
									uni.showModal({
										content: '安装更新失败',
										showCancel: false
									})
								});
						} else {
							waiting.close();
							uni.showModal({
								content: '下载更新文件失败',
								showCancel: false
							})
						}
					},
					fail: function() {
						
						waiting.close();
						uni.showModal({
							content: '下载更新文件失败',
							showCancel: false
						})
					}
				});

				//监听下载
				task.onProgressUpdate(function(downloadRes) {
					if (progress != downloadRes.progress) {
						waiting.setTitle("正在下载" + downloadRes.progress + "%", {
							padding: "10px"
						})
					}
					if (downloadRes.progress == 100) {
						waiting.close()
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.assistantContent {
		background: #F9F9F9;
		// height: calc(100vh - 110rpx);

		.upper {
			position: fixed;
			z-index: 1;
			top: 0;
			left: 0;
			width: 100%;

			.title {
				background: url('../../static/img/inspectBg.png');
				background-size: cover;
				width: 100%;
				height: 115rpx;
				line-height: 115rpx;
				position: relative;
				display: flex;
				justify-content: center;

				text {
					font-size: 30rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					letter-spacing: 1px;
				}

				.screen {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translate(0%, -50%);
					width: 35rpx;
					height: 33rpx;
				}
			}
		}

		.centre {
			margin: 115rpx 0 0 0;
			// padding: 50rpx 17.5rpx 0 17.5rpx;
			padding: 85rpx 17.5rpx 0 17.5rpx;
			height: calc(100vh - 200rpx);
			overflow-x: hidden;
			display: flex;
			flex-direction: column;

			.top {
				height: 190rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 29rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 15rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				position: relative;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
					position: absolute;
					top: 0%;
					left: 50%;
					transform: translate(-50%, -50%);
				}

				.h1 {
					margin: 64rpx auto 14rpx;
					font-size: 23rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				.h2 {
					font-size: 18rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #0552A9;
					background: #E6EDF6;
					border-radius: 22rpx;
					padding: 10rpx 50rpx;
				}
			}

			.bottom {
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 34rpx 0rpx rgba(0, 0, 0, 0.05);
				border-radius: 18rpx;
				margin: 25rpx 0;
				// padding: 38rpx 35rpx 35rpx 38rpx;
				padding: 0rpx 35rpx 0rpx 38rpx;

				.li {
					display: flex;
					justify-content: flex-start;
					align-items: center;

					.image {
						width: 25rpx;
						height: 25rpx;
						margin: 0 20rpx 0 0;
					}

					.box {
						display: flex;
						justify-content: space-between;
						align-items: center;
						width: 95%;
						border-bottom: 1px solid #DCDCDC;
						padding: 32rpx 0;

						.content {

							.h1 {
								font-size: 28rpx;
								font-family: PingFangSC-Medium, PingFang SC;
								font-weight: 500;
								color: #0F0F45;
							}

							.h2 {
								font-size: 24rpx;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #999999;

								text {
									color: #03AAA5;
								}
							}
						}

						.open {
							font-size: 20rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #999999;
							padding: 0 20rpx 0 0;
							position: relative;

							.arrow {
								position: absolute;
								right: 0;
								top: 50%;
								width: 12rpx;
								height: 12rpx;
								border-left: 1rpx solid #999999;
								border-top: 1rpx solid #999999;
								transform: translate(0%, -50%) rotate(135deg);
							}
						}
					}

					&:last-child {

						.box {
							border: none;

							.open {
								padding: 0;

								.arrow {
									display: none;
								}
							}
						}
					}
				}
			}
		}
	}
</style>